<template>
  <div class="page_box">
    <el-pagination v-model:currentPage="page.page" :page-sizes="[15, 25, 50, 100]" v-model:page-size="page.page_size" background layout="slot, prev, pager, next, sizes" :total="props.total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
      <span class="total">
        共 <i>{{ props.total?.toLocaleString?.() }}</i> 条
      </span>
    </el-pagination>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const emit = defineEmits(['submit'])
const props = defineProps(['total'])
interface Page {
  page?: number,
  page_size?: number,
}
// 总数量
const page = reactive<Page>({
  page: 1,
  page_size: 15
})

const initPage = (val: Page = {}) => {
  page.page = val.page || 1
  page.page_size = val.page_size || 15
}

const handleSizeChange = (val: number) => {
  page.page = 1
  page.page_size = val
  emit('submit', page)
}
const handleCurrentChange = (val: number) => {
  page.page = val
  emit('submit', page)
}

defineExpose({
  initPage
})
</script>
<style lang="scss" scoped>
  .page_box {
    margin: 10px 0;
    width: 100%;
    text-align: right;
    .el-pagination {
      justify-content: flex-end;
      > :last-child {
        margin-right: 0;
      }
    }
    .total {
      font-weight: normal;
      font-family: var(--tabel-text-family);
      margin-right: 24px;
      i {
        font-style: normal;
        color: var(--main-color);
      }
    }
  }
</style>
